<script setup lang="ts">
import { ref } from 'vue'
import PDFUploader from './PDFUploader.vue'
import PDFViewer from './PDFViewer.vue'
import axios from 'axios'
import { ElSelect } from 'element-plus'

const srcPdf = ref("")
const translatePdf = ref("")

const language = ref('zh')

const onLoaded = (pdfApp: any) => {
  console.log('loaded app:', pdfApp)
}

const handleUploaded = async (filename: any) => {
  console.log(filename)
  srcPdf.value = `/api/download/${filename}`
  const response = await axios.get(`/api/translate/${filename}/${language.value}`, {timeout: 10 * 60 * 1000});
  translatePdf.value = `/api/download/${response.data}`
}
</script>

<template>
    <PDFUploader @fileUploaded="handleUploaded"></PDFUploader>
    目标语言：
    <el-radio-group v-model="language">
      <el-radio value="zh">中文</el-radio>
      <el-radio value="de">德语</el-radio>
      <el-radio value="fr">法语</el-radio>
      <el-radio value="ko">韩语</el-radio>
      <el-radio value="ja">日语</el-radio>
    </el-radio-group>
    <div class="main-container">
      <div class="left-pdf">
        <PDFViewer
          page-scale="page-fit"
          width="100%"
          height="100%"
          theme="dark"
          :src="srcPdf"
          @loaded="onLoaded">
        </PDFViewer>
      </div>
      <div class="right-pdf">
        <PDFViewer
          page-scale="page-fit"
          width="100%"
          height="100%"
          theme="dark"
          :src="translatePdf"
          @loaded="onLoaded">
        </PDFViewer>
      </div>
    </div>
</template>
<style>
.main-container {
  width: 100%;
  height: calc(100vh - 90px);
  padding: 10px;
}
.left-pdf {
  width: 50%;
  float: left;
  padding: 5px;
  height: 100%;
}
.right-pdf {
  width: 50%;
  float: left;
  padding: 5px;
  height: 100%;
}
</style>